﻿<style>
    #content {
        width: 100%;
        height: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    #right {
        width: 200px;
        height: 500px;
        background-color: black;
    }

    .col1 {
        margin-top: 100px;
        background-color: green;
        float: left;
        width: 30%;
        height: 200px;
    }

    .shakira-box {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }

        .shakira-box img {
            width: 100%;
            height: 100%;
        }

        .shakira-box .shakira-content {
            width: 100%;
            height: 120px;
            top: -40px;
            position: relative;
            background-color: rgba(0,0,0,0.6);
            color: #FFF;
        }

        .shakira-box .shakira-header {
            height: 40px;
            margin: 0;
            font-size: 15pt;
            padding: 0 5px;
        }

        .shakira-box:hover .shakira-content {
            top: -120px;
        }

        .shakira-box .shakira-content {
            width: 100%;
            height: 120px;
            top: -40px;
            position: relative;
            background-color: rgba(0,0,0,0.6);
            color: #FFF;
            transition: top 0.5s;
            -moz-transition: top 0.5s;
            -webkit-transition: top 0.5s;
            -o-transition: top 0.5s;
            -ms-transition: top 0.5s;
        }

    #addtocart {
        background-color: white;
        color: black;
    }
</style>

<head>
    <title>Shoes Category</title>
    <meta charset="utf-8" />
    <link href="~/CSS/Category.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="banner">
        <img id="banner" style="padding-top:10px;width:1100px" src="~/Images/nike.jpg" />
    </div>
    <div id="main">
        <h1 style="font-size:50px;" >Product Category</h1>
        <div class="product">

            @foreach (var item in ViewBag.pro)
            {
              <div class="col1">
            <div class="shakira-box">
                <img src="~/Images/@item.Image">
                <div class="shakira-content">
                    <h2 class="shakira-header">@item.Name</h2>
                    @*<b style="float:left">Price: @item.Price $</b><br />
                    <b style="float:left">Color: @item.Color </b>*@
                    <a style="float:right;margin-top:20px;margin-right:20px;" id="addtocart" href="~/Product/AddCart?id=@item.Id">Add To Cart <img src="~/Images/addicon.png" style="width:20px; height:20px; float:right " id="addicon" /></a><br />
                    <a style="float:left;margin-left:20px;" id="addtocart" href="~/Home/Details?id=@item.Id">Product Details </a>
                  
                </div>
            </div>  
        </div>  
            }
            
        
        </div>

    </div>

</body>
